    <template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"></el-table-column>
      <el-table-column
        prop="zhanghao"
        label="账号"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="180"
      ></el-table-column>

      <!-- <el-table-column prop="email" label="邮箱" width="180"></el-table-column> -->
      <el-table-column prop="status" label="状态" width="180">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success"> 管理员 </el-tag>
          <el-tag v-if="scope.row.status == 0"> 用户 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <template>
      <div class="container-fluld">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            <li @click="toPrePage">
              <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
            <li
              :class="{ active: pager._page == pageNum }"
              @click.prevent="toPage(pageNum)"
              v-for="pageNum in 4"
              :key="pageNum"
            >
              <a href="#">{{ pageNum }}</a>
            </li>
            <li @click="toNextPage">
              <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </template>

    <!-- 编辑表单 -->

    <el-dialog :visible.sync="dialogVisible" width="30%">
      <span>修改</span>
      <el-form :model="editForm">
        <el-form-item label="账号">
          <el-input v-model="editForm.zhanghao"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
        <!-- <el-form-item label="邮箱">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="editForm.status"></el-input>
        </el-form-item> -->
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitEditRow()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改表单 -->
    <el-dialog :visible.sync="addVisible" width="30%">
      <span>添加</span>
      <el-form :model="addForm">
        <el-form-item label="编号">
          <el-input v-model="addForm.id"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="addForm.zhanghao"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="addForm.status"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="closeDialog()">取消</el-button>
        <el-button type="primary" @click="sumbitAddUsers()">确定</el-button>
      </div>
    </el-dialog>
    <!-- <el-input
      v-model="input"
      placeholder="请输入账号"
      style="width: 140px"
    ></el-input
    >&nbsp;
    <el-button type="primary">查询</el-button> -->
    <el-button type="primary" @click="addUsers">增加</el-button>
  </div>
</template>


<script>
// import Vue from 'vue';
var _index;
export default {
  data() {
    return {
      input: "",
      cur_page: 1, //默认在第一页

      pageNum: 1, //默认每页显示1条数据

      // totalCount:1,//默认总条数为一条
      activeIndex2: "1",
      dialogVisible: false,
      addVisible: false,
      editForm: [],
      addForm: [],

      list: [],
      pager: {
        _page: 1,
        _limit: 6,
      },
    };
  },

  created() {
    this.query();
  },
  mounted() {
    this.getUsers();
  },
  query() {
    this.axios.get(" http://localhost:3000/lesso").then((response) => {
      this.list = response.data;
    });
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    //删除
    handleDelete(index, row) {
      alert(row.id);
      this.axios
        .delete("http://localhost:3000/users/" + row.id)
        .then((response) => {
          this.list.splice(index, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //修改
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.editForm = Object.assign({}, row);
      _index = index;
      console.log("index的值是：" + index);
      console.log("_index" + _index);
      console.log("row的值是：" + row);
    },
    addUsers() {
      this.addVisible = true;
      this.addForm = {
        id: "",
        zhanghao: "",
        password: "",
        status: "",
      };
    },

    sumbitEditRow() {
      var editData = _index;
      console.log("editData的值" + this.editForm);
      this.list[editData].zhanghao = this.editForm.zhanghao;
      this.list[editData].password = this.editForm.password;
      // this.list[editData].email = this.editForm.email;
      this.list[editData].status = this.editForm.status;
      this.dialogVisible = false;
      console.log("对象数组", this.list);
    },
    //增加
    sumbitAddUsers() {
      this.list = this.list || [];
      if (this.addForm.id == "") {
        // alert("编号不能为空");
      } else if (this.addForm.zhanghao == "") {
        alert("账号不能为空");
      } else if (this.addForm.password == "") {
        alert("密码不能为空");
      } else if (this.addForm.status == "") {
        alert("用户状态不能为空");
      } else {
        var addUsers = new URLSearchParams();
        addUsers.append("id", this.addForm.id);
        addUsers.append("zhanghao", this.addForm.zhanghao);
        addUsers.append("password", this.addForm.password);
        addUsers.append("status", this.addForm.status);
        this.axios
          .post("http://localhost:3000/users", addUsers)
          .then((response) => {
            // console.log("新增的用户为：", response);
            if (response.data.code == 0) {
              alert(response.data.message);
              this.list.push({
                id: response.data.data.id,
                zhanghao: response.data.data.zhanghao,
                password: response.data.data.password,
                status: response.data.data.status,
              });
            } else {
              // alert("新增失败" + response.data.message);
            }
          })
          .catch((error) => {
            console.log("新增失败的原因", error);
          });
      }
      this.addVisible = false;
    },
    getUsers() {
      this.axios
        .post("http://localhost:3000/users")
        .then((response) => {
          this.list = response.data.data;
          // console.log("增加的用户为", this.list);
        })
        .catch((error) => {
          console.log("错误的原因：", error);
        });
    },
    closeDialog() {
      this.dialogVisible = false;
      console.log("editfrom", this.editForm);
    },
    // 分页
    toPage(pageNum) {
      this.pager._page = pageNum;
      this.query();
    },
    toNextPage() {
      this.pager._page++;
      this.query();
    },
    toPrePage() {
      this.pager._page--;
      this.query();
    },

    query() {
      this.$api.__api_list_users(this.pager).then((data) => {
        this.list = data;
      });
    },
  },

  list() {
    const input = this.input;
    if (input) {
      console.log("input输入的内容是：" + this.input);
      return this.list.filter((data) => {
        console.log("object" + Object.keys(data));
        return Object.keys(data).some((key) => {
          return String(data[key]).toLowerCase().indexOf(input) > -1;
        });
      });
    }
    return this.list;
  },
};
</script>